<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#343541">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>Gemini 聊天代理</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
</head>
<body>
    <div class="app-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2>会话历史</h2>
                <button id="newChatBtn" class="new-chat-btn" aria-label="新建会话">
                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                    <span class="btn-text">新建会话</span>
                </button>
            </div>
            <nav class="chat-history-list" id="chatHistoryList" role="navigation" aria-label="聊天历史">
                <a href="#" class="chat-history-item active" data-chat-id="initial-welcome-message" role="button" tabindex="0">
                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V3a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                    <span>欢迎</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="settings-toggle" id="settingsToggle" role="button" tabindex="0" aria-label="设置" aria-expanded="false">
                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1.51-1V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V15z"></path></svg>
                    <span class="btn-text">设置</span>
                </div>
                <div class="settings-panel hidden" id="settingsPanel" role="region" aria-label="设置面板">
                    <div class="setting-item">
                        <label for="apiKey">Gemini API Key:</label>
                        <input type="password" id="apiKey" placeholder="在此输入你的 Gemini API Key" aria-describedby="apiKeyHelp">
                        <small id="apiKeyHelp" class="help-text">您的API密钥将安全地存储在本地浏览器中</small>
                    </div>
                    <div class="setting-item">
                        <label for="modelName">模型名称:</label>
                        <input type="text" id="modelName" value="gemini-1.5-pro-latest" placeholder="例如: gemini-1.5-pro-latest" aria-describedby="modelNameHelp">
                        <small id="modelNameHelp" class="help-text">推荐: gemini-1.5-pro-latest (支持多模态), gemini-2.5-pro (最新模型)</small>
                    </div>
                    <button class="save-settings-btn" id="saveSettingsBtn" aria-label="保存设置">保存设置</button>
                </div>
            </div>
        </aside>

        <main class="chat-main-content" role="main">
            <div class="chat-window" id="chatWindow" role="log" aria-live="polite" aria-label="聊天消息">
                <div class="message-wrapper system" id="initial-welcome-message">
                    <div class="message-avatar" aria-hidden="true">🤖</div>
                    <div class="message-content">
                        <div class="message-text">你好！请在左侧点击"设置"按钮输入你的 Gemini API Key 和模型名称，然后开始聊天吧。</div>
                    </div>
                </div>
            </div>

            <div class="chat-input-area-wrapper">
                <div class="chat-input-area">
                    <div class="input-controls">
                        <button id="attachBtn" class="control-btn" aria-label="添加附件" title="添加附件">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                            </svg>
                        </button>
                        <input type="file" id="fileInput" accept="image/*,.pdf,.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx" style="display: none;">
                    </div>
                    <textarea 
                        id="userInput" 
                        placeholder="输入你的消息..." 
                        rows="3" 
                        aria-label="输入消息"
                        aria-describedby="inputHelp"
                        autocomplete="off"
                        autocorrect="off"
                        autocapitalize="sentences"
                        spellcheck="true"
                    ></textarea>
                    <button id="sendBtn" aria-label="发送消息" type="button">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>
                </div>
                <div id="statusMessage" class="status-message" role="status" aria-live="polite"></div>
                <div id="inputHelp" class="input-help" aria-hidden="true">按 Enter 发送，Shift+Enter 换行</div>
                <div id="filePreview" class="file-preview"></div>
            </div>
        </main>
    </div>

 <!--   <script id="markedJs" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
	<script src="{{ url_for('static', filename='marked.min.js') }}"></script>
    <script id="highlightJs" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>